<!DOCTYPE html>
<html>
  <head>
		<style>
			body { margin:0; padding:0; }
			h2, p {margin:0;}
			
			.content_div { position:relative; }
			
			#head_div {
				margin-top:10px;
				background:#666;
				color:#F03;
			}
			h2.pos_left {
				position:relative;
				left:-20px;
				/** 为啥   margin-top:60px;  在这里起作用 会影响到后面所有元素的 */
				margin-top:20px;
				/** 此处的top只会影响自己的位置，但是后面的元素还是显示在原来的位置 */
				top:5px;
				background-color:#33C;
			}
			
			h2.pos_right {
				/** 该元素的y值在上个元素原始位置的maxY处，如果上个元素top变了，该元素的maxY仍然是初始值 */
				position:relative;
				/** 为啥
				margin-top：200px; 
				 在这里不起作用 */
				top:0px;
				left:20px;
				background:#FC9;
			}
			#bottom_header {
				/** 如果这里不设置任何属性那么后面的文档元素就会紧跟着pos_right标签的maxY处 */
				position:relative;
				/** 这里的margin-top是相对于head_div这个标签来说的 */
				margin-top: 0px;
				/** 为什么
				top:200px
				在这里不起作用 反而影响了文本的左间距 */
				left:20px;
				color:#F00;
				background-color:#660;
			}
			#bottom_div {
				/** 有了相对属性left才会起作用 */
				position:relative;
				/** 这里是相对于bottom_header的间距 */
				margin-top: 5px;
				/** 为什么
				top:200px
				在这里不起作用 */
				left:30px;
				background-color:#C99;
			}
    </style>
  </head>

  <body>
  	<div id="content_div">
      <h2 id="head_div">This is a heading with no position</h2>
      <h2 class="pos_left">This heading is moved left according to its normal position</h2>   
      <h2 class="pos_right">This heading is moved right according to its normal position</h2>
    </div>
    
    <p id="bottom_header">bottom header position.</p>
    
    <div id="bottom_div">
      <p>Relative positioning moves an element RELATIVE to its original position.</p>
      <p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
      <p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
  	</div>
  </body>

</html>